@config.main(" Co-expression Network") {

    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("network/vis.min.css")">

    <div class="body-box">
        <div class="page-box">

            @config.subTitle(" Co-expression Network")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">

                        <div class="col-sm-12 form-group my-position">
                            <label class="col-sm-2 my-position-title">Gene ID :</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" type="text" rows="5" name="ids" id="ids"></textarea>
                                <span  >
                                    e.g.,&nbsp;<a href="javascript:void(0);" onclick="getEg()"><em class="egCrics">
                                    Example</em></a></span>
                            </div>
                        </div>


                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                            Run</button>
                    </div>
                </form>

                <div id="result" style="display: none;">
                    <hr>

                    <h5>Result:</h5>
                    <button class="btn my-btn" id="loadPng">Download</button>
                    <div id="charts" style="height: 500px;
                        width: 100%;
                        background-color: white"></div>

                    <div style="width: 100%;">
                        <table class="table table-hover table-bordered" id="net-table" style="width: 100%;" data-advanced-sortable="true" data-pagination="true"
                        data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all" data-page-list="[10]"
                        >
                            <thead>
                                <tr>
                                    <th data-field="0" data-sortable="true" data-search-type="text" data-formatter="GetByGeneId">
                                        From Node</th>
                                    <th data-field="1" data-sortable="true" data-search-type="text" data-formatter="GetByGeneId">
                                        To Node</th>
                                    <th data-field="2" data-sortable="true" data-search-type="text">Weight</th>
                                </tr>
                            </thead>

                        </table>

                    </div>


                </div>

            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("network/vis.min.js")" type="text/javascript"></script>

    <script>

            $(function () {
                formValidation()
            })


            function Search(formId) {
                let form = $("#form" )
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "@routes.ToolsController.networkRun()",
                        type: "post",
                        data: form.serialize(),
                        success: (data) => {
                            $("#net-table").bootstrapTable({data: data.net})
                            let $result = $("#result")
                            $result.show();
                            layer.close(index)
                            let target_top = $result.offset().top ;
                            $("html,body").animate({scrollTop: target_top}, 800);
                            NetWork(data)

                        }
                    })
                }
            }

            function getEg() {
                let eg = "MsG0180000001.01,MsG0180000002.01,MsG0180000003.01,MsG0180000004.01,MsG0180000005.01,MsG0180000006.01,MsG0180000007.01,MsG0180000008.01,MsG0180000009.01,MsG0180000010.01";
                $(`#ids`).val(eg)
            }

            function formValidation() {
                let queryText = {
                    validators: {
                        notEmpty: {
                            message: 'This is not be empty!'
                        }
                    }
                }
                let integer = {
                    validators: {
                        notEmpty: {
                            message: 'Word size is required！'
                        },
                        integer: {
                            message: 'Word size must be intger！'
                        }
                    }
                }
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        ids: queryText
                    }
                });
            }

            function NetWork(data) {
                let edgesDataset = new vis.DataSet(data.edges);
                let nodesDataset = new vis.DataSet(data.nodes);
                let container = document.getElementById('charts');
                // vis数据
                let data1 = {nodes: nodesDataset, edges: edgesDataset};
                let options = {
                    autoResize: true,
                    width: "1100px",
                    nodes: {
                        shape: 'dot',
                        size: 5,
                        borderWidth: 0,
                        borderWidthSelected: 0,
                        font: '18px arial #333'
                    },
                    physics: false,
                    groups: {
                        geneGroup: {color: {background: 'red'}, borderWidth: 0, size: 10}
                    },
                    edges: {
                        width: 0.2,
                        color: '#999',
                        smooth: {
                            type: 'continuous'
                        }
                    },
                    interaction: {
                        hover: true,
                        tooltipDelay: 50
                    }
                };

                // 初始化网络
                new vis.Network(container, data1, options);

                $("#charts canvas").attr("id","canvas");
            }

            $("#loadPng").on('click',function () {
                var mynetworkCanvas = document.getElementById("canvas");
                console.log('mynetworkCanvas',mynetworkCanvas);
                mynetworkCanvas.toBlob(function(blob) {
                    var a = document.createElement("a");
                    document.body.appendChild(a);
                    a.download = "network" + ".png";
                    a.href = window.URL.createObjectURL(blob);
                    a.click();
                });
            });



            function GetByGeneId(value,row) {
                return `<a href="/alfalfa/browse/geneByGeneId/${value}" target="_blank">${value}</a>`
            }



    </script>
}